<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>多选框，全部选中或者全部取消</h1>
    <div>

        爱好:
        <input type="checkbox" id="hobby"  >乒乓球
        <input type="checkbox" id="hobby" > 象棋
        <input type="checkbox" id="hobby" > 荡秋千
    </div>
    <div>
        <button id="selectAll">全选</button>
        <button id="unSelectAll">全取消</button>
    </div>
</body>
<script>
// jquery checked属性，true选中，false不选 ,attr 属性
$("#selectAll").click(function(){
    // 因为hobby多个值，返回是一个数组，直接操作就只是第一个元素
    // $("#hobby").attr("checked",true);
    
    // 筛选器,[id=hobby]会拿到页面每一个元素   
    // attr放方法只能执行一此全选，是我们应该用prop  prop专门用在Boolean值
    $("[id=hobby]").prop("checked",true);
})
// 取消全选可以点多次
$("#unSelectAll").click(function(){
    $("[id=hobby]").prop("checked",false);
})
</script>
</html>